<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script> 

</head>


<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习vue </h2>
    </div>
   
</body>

<script type="text/javascript">
   Vue.config.productionTip=false;
 
    let vm =new Vue({
        el:"#root",
        data:{
            opacity:1
        }, 
        methods: {
            // 会导致定时器不断创建,因为opacity变化会重新执行开启新的定时器
            // change(){
            //     console.log("change")
            //     setInterval(()=>{
            //     this.opacity -=0.01
            //     if(this.opacity<=0){
            //         this.opacity=1
            //     }
            // },16)
            // }
        },
        // },
        // mounted() {  //Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕) 调用mounted
        //     setInterval(()=>{
        //         this.opacity -=0.01
        //         if(this.opacity<=0){
        //             this.opacity=1
        //         }
        //     },16)
        // }
    })
 

    
</script>
</html>